<template>
  <div class="noteIndex">
    <div class="top">
      <p class="learn">学习笔记</p>
      <div>
        <ly-tab v-model="selectedId" :items="items" :options="options" @change="handleChange"></ly-tab>
      </div>
    </div>
    <Loading v-if="notMore" class="empty-text-wrap"/>
    <div class="loadMoreWrap">
      <mu-load-more @load="load" :loading="loading">
        <div class="content1">
          <div class="box" v-for="item of listData" :key="item.id">
            <div class="title">
            <span>
              <img :src=item.party_info&&item.party_info.photo||defaultAvatar alt>
              <div class="name">{{item.party_info&&item.party_info.name}}</div>
            </span>
              <div class="time">{{item.create_time | time }}</div>
            </div>
            <div class="content">
              <p :class="item.toggle ?'':'space'">{{item.content}}</p>
              <span
                      class="switch"
                      v-if="item.content.length>50"
                      @click="toggle(item)"
              >{{item.toggleName}}</span>
              <div class="des">
                <img :src="item.info&&item.info.photo" alt>
                <div>
                  <p>{{item.info&&item.info.title}}</p>
                  <div>
                    <div>
                      <i class="iconfont iconzuzhi_icon_biaoqian"></i>
                      <span>{{item.status | label}}</span>
                    </div>
                    <div>
                      <i class="iconfont iconxuexi_icon_zhangjie"></i>
                      <span>共{{item.info&&item.info.chapters_num||0}}节</span>
                    </div>
                    <div>
                      <i class="iconfont iconyanjing"></i>
                      <span>{{item.info&&item.info.study_num||0}}人看过</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="islike" @click="is_like(item)" :class="item.is_like == 1?'red':''">
              <i class="iconfont iconwode_icon_dianzan"></i>
              <span>{{item.like_numbers||0}}</span>
            </div>
          </div>
          <!--<div class="loading">{{loaded}}</div>-->
        </div>
      </mu-load-more>
    </div>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||listData.length<6}">{{loaded}}</div>
  </div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    import LyTab from "@cp/index";

    export default {
        components: {
            LyTab,
            Loading
        },
        data() {
            return {
                to: false,
                show: false,
                defaultAvatar:'https://media.71ydj.com/FvSE_SRijRPJ-Qkti8sHfYr1W9zH#',
                p: 1,
                org_type: 1,
                loaded: "加載更多...",
                notMore: false,
                loading:false,
                loadOver:false,
                listData: [],
                selectedId: 0,
                bottomSelectedId: 0,
                items: [
                    { label: "本支部", org_type: "1" },
                    // { label: "党委", org_type: "2" }
                ],
                options: {
                    activeColor: "#fff",
                    color: "rgba(255,255,255,.6)"
                }
            };
        },
        mounted() {
            this.$progress.done();
            this.init();
        },
        filters: {
            label: function(v) {
                if (v == "1") {
                    return "视频";
                }
                if (v == "2") {
                    return "音频";
                }
                if (v == "3") {
                    return "专辑";
                }
            }
        },
        methods: {
            is_like(item) {
                this.$http
                    .post("/applets/My/note_like", {
                        id: item.id,
                        phone: JSON.parse(Cookies.get('user_71ydj')).phone
                    })
                    .then(res => {
                        if(item.is_like == 1){
                            item.is_like = 0
                            item.like_numbers = item.like_numbers - 1;
                            return
                        }
                        item.is_like = 1;
                        item.like_numbers = item.like_numbers+1;
                    });
            },
            init() {
                this.$http
                    .get("/applets/My/org_note_list", {
                        p: this.p,
                        page :6,
                        org_type: this.org_type,
                        phone: JSON.parse(Cookies.get('user_71ydj')).phone,
                        org_id: JSON.parse(Cookies.get('user_71ydj')).organization_id,
                        // id:JSON.parse(Cookies.get('user_71ydj')).id,
                    })
                    .then(res => {
                        res.data.data.forEach(e => {
                            e.toggle = false;
                            e.toggleName = "展开";
                        });
                        console.log(res.data.data)
                        if (res.data.data.length) {
                            this.listData.push(...res.data.data);
                        }
                        this.loadOver = false;
                        if (this.p != 1) {
                            if (res.data.data.length) {
                            } else {
                                this.loadOver = true;
                                this.loading = false;
                                this.loaded = '没有更多数据了'
                                return false
                            }
                        } else {
                            if (!res.data.data.length) {
                                this.notMore = true;
                                this.loadOver = false;
                            } else {
                                if (res.data.data.length < 6 && res.data.data.length != 0) {
                                    this.loadOver = true;
                                    this.loaded = '没有更多数据了';
                                    this.notMore =false;
                                }
                            }
                        }

                        // if (res.data.data.length == 0) {
                        //   this.loaded = "没有更多了";
                        //   this.notMore = false;
                        //   return;
                        // }
                        // this.listData.push(...res.data.data);
                        // if (res.data.data.length < 10) {
                        //   this.loaded = "没有更多了";
                        //   this.notMore = false;
                        //   return;
                        // }
                    });
            },

            toggle(item) {
                item.toggle = !item.toggle;
                if (item.toggle) {
                    item.toggleName = "收起";
                    return;
                }
                item.toggleName = "展开";
            },
            load() {
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.init(this.p);
                        this.loading = false;
                    }, 1000);
                }
                // if (this.notMore) {
                //   clearTimeout(this.method);
                //   this.method = setTimeout(() => {
                //     this.p = this.p + 1;
                //     this.init();
                //   }, 500);
                // }
            },

            handleChange(item, index) {
                this.p = 1;
                this.org_type = item.org_type;
                this.listData = [];
                this.loaded = "加载更多...";
                this.notMore = false;
                this.loadOver =false;
                this.init();
            }
        }
    };
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .red {
    * {
      color: #eb4d44 !important;
    }
  }
  .space {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

  }
  .switch {
    color: #eb4d44;
    font-size: 14px;
    margin-left: 300px;
  }
  .top {
    background: url("~@as/img/xuexi_note_top@2x.png");
    background-size: 100% 100%;
    width: 100%;
    height: 229px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .learn {
      color: #fff;
      font-size: 24px;
      font-weight: 500;
      margin-top: 73px;
      margin-left: 13px;
    }

    div {
      width: auto;
    }
  }
.loadMoreWrap{
  margin-top: -50px;
  .content1 {
    width: 343px;
    margin-left: 17px;
    margin-right: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}


  .box {
    width: 343px;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 14px;
    box-shadow: 0px 0px 8px 0px #999;

    .title {
      width: 307px;
      height: 25px;
      margin-top: 15px;
      margin-left: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          border-radius: 50%;
        }

        .name {
          margin-left: 6px;

          font-size: 12px;
          color: #eb4d44;
        }
      }

      .time {
        font-size: 12px;
        color: #666;
      }
    }

    .content {
      p {
        font-size: 14px;
        color: #333;
        margin-left: 49px;
        margin-top: 15px;
        width: 281px;
        word-wrap: break-word;
      }
      .des {
        margin-top: 10px;
        width: 281px;
        height: 87px;
        margin-left: 47px;
        background: #f7f7f7;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          width: 73px;
          height: 62px;
        }

        & > div {
          width: 178px;
          height: 62px;

          display: flex;
          flex-direction: column;
          justify-content: space-between;
          & > div {
            width: 100%;
            height: 12px;

            display: flex;
            align-items: center;
            justify-content: space-between;
            div {
              display: flex;
              align-items: center;
              span {
                font-size: 10px;
                color: #999;
              }

              i {
                font-size: 10px;
                color: #999;
                margin: 2px;
              }
            }
          }
          & > p {
            margin: 0;

            width: 178px;
            height: 32px;
            font-size: 12px;
            color: #666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }

  .islike {
    width: 280px;
    margin: 10px;
    margin-left: 47px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    i {
      font-size: 12px;
      color: #ccc;
      margin: 3px;
    }
    span {
      font-size: 12px;
      color: #ccc;
    }
  }
  .loading {
    width: 100%;
    font-size: 14px;
    color: #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    &.notPageOne {
      margin-top: -40px;
    }
  }
  .empty-text-wrap {
    width: 100%;
    height: 40vh;
    margin-top: 10vh;
  }

  .mu-load-more /deep/ .mu-circle-spinner{
    border-color: #e5e5e5;
  }
  .noteIndex /deep/.mu-elevation-1{
    box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
  }
</style>